<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>ImageZoomer Using ScrollView</title>
    <script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/log.js"></script>
    <link rel="stylesheet" href="../../../../assets/dpl.css">
    <style>
        .ks-image-zoomer-hide-scrollbar {
            overflow: hidden;
        }

        body, ul, li {
            padding: 0;
            margin: 0;
            border: 0;
        }

        .ks-image-zoomer {
            left: 0;
            top: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 10;
            /*background-color: #ffff00;*/
        }

        .ks-image-zoomer-close {
            background: url(http://img02.taobaocdn.com/tps/i2/T1Y1r0Xc8cXXXK3ITg-44-44.png);
            width: 44px;
            height: 44px;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 100;
            cursor: pointer;
        }

        .ks-image-zoomer-mask {
            left: 0;
            top: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 9;
            background-color: #333;
            opacity: 0.6;
        }

        .ks-image-zoomer img {
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<h1>open in touch device or emulate touch in chrome</h1>

<h2 id="wait" style="color:red">please wait, loading ....</h2>

<img id='img'
     width="360" height="360"
     src="http://img02.taobaocdn.com/bao/uploaded/i2/16818024426638425/T1A2tmFgdeXXXXXXXX_!!0-item_pic.jpg_360x360.jpg"/>
<script src="/kissy/src/package.js"></script>
<script src="./image-zoomer.js"></script>
<script>
    // 本 demo 会在 ie10 模拟 ie7 下白屏，原因不明，请设置
    // <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    var bigImg = 'http://img02.taobaocdn.com/bao/uploaded/i2/16818024426638425/T1A2tmFgdeXXXXXXXX_!!0-item_pic.jpg';
    KISSY.config('packages', {
        'image-zoomer': {
            base: './'
        }
    });
    KISSY.use('node,image-zoomer', function (S, Node, imageZoomer) {
        var $ = Node.all;
        $('#img').on(Node.Gesture.tap, function () {
            imageZoomer.showImage({
                src: bigImg,
                width: 1200,
                height: 1200
            });
        });
        $('#wait').css({
            color: 'green'
        }).html('ok,please tap image');
    });
</script>
</body>
